<template>
    <div>
        <Header :left="true" leftText="返回" title="质量辅助决策查询"/>
        <van-form :style="autoHeight" @submit="onSubmit">
                <van-field required readonly class="formstyle" style="font-weight: bold" name="picker" :value="item.PlineId"
                label="生产线选择" placeholder="点击选择生产线选择" show-word-limit 
                @click="showPickerPline" rows="2" autosize />
            <van-popup v-model="showPickerpline" position="bottom">
                <van-picker show-toolbar :columns="searchColumns" @confirm="onConfirmpline" @cancel="showPickerpline = false">
                <template #option="option">
                    <div style="display: flex; flex-direction: column; align-items: center">
                    <div>{{ option.plineName }}</div>
                    </div>
                </template>
                <template #title>
                    <van-field v-model="searchKey" placeholder="请输入搜索内容" clearable />
                </template>
                </van-picker>
            </van-popup>
            <van-field required readonly class="formstyle" style="font-weight: bold" name="picker" :value="item.POrderID"
                label="生产订单" placeholder="点击选择生产订单" show-word-limit 
                @click="showPickerPOrder" rows="2" autosize />
            <van-popup v-model="showPickerPOrderID" position="bottom">
                <van-picker show-toolbar :columns="columnsPOrderIDND" @confirm="onConfirmPOrderID"
                @cancel="showPickerPOrderID = false">
                <template #option="option">
                    <div style="display: flex; flex-direction: column; align-items: center">
                    <div>{{ option.POrderIDAndMaterialName }}</div>
                    </div>
                </template>
                <template #title>
                    <van-field v-model="searchKey1" placeholder="请输入搜索内容" clearable />
                </template>
                </van-picker>
            </van-popup>  
            <!-- <van-field  readonly class="formstyle" style="font-weight: bold" name="picker" v-model="item.MaterailID"
                label="产品代码" placeholder="产品代码"  />
            <van-field  readonly class="formstyle" style="font-weight: bold" name="picker" v-model="item.MaterailName"
                label="产品名称" placeholder="产品名称"  />   -->
                
            <!-- <van-field  readonly required class="formstyle" style="font-weight: bold" name="picker" v-model="item.StatID"
                label="统计指标代码" placeholder="统计指标代码"  @click="showPickerPStatID=true" /> -->
            <van-popup v-model="showPickerPStatID" position="bottom">
                <van-picker show-toolbar :columns="statColumn2" @confirm="onConfirmStatID"
                @cancel="showPickerPStatID = false">
                <template #option="option">
                    <div style="display: flex; flex-direction: column; align-items: center">
                    <div>{{ option.Pshow }}</div>
                    </div>
                </template>
                <template #title>
                    <van-field v-model="searchKey2" placeholder="请输入搜索内容" clearable />
                </template>
                </van-picker>
            </van-popup>    
      
      <div style="margin: 16px" >
        <van-button color="#138087" round block type="info" native-type="submit" >查询</van-button>
      </div>
    </van-form>
    </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient as _httpClientApisie } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
export default {
    name: 'qualityAssistance',
    components: {
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
    data() {
        return {
            //生产线选择
            item:{
                StatID:""
            },
            plineStatus:0,
            searchKey: "",
            showPickerpline: false,
            searchColumns: [],
            columnspline: [],

            //订单
            orderStatus:0,
            searchKey1: "",
            showPickerPOrderID: false,
            columnsPOrderIDND:[],
            columnsPOrderID:[],

            //stat
            showPickerPStatID:false,
            searchKey2:"",
            statColumn:[],
            statColumn2:[],


        };
    },

    created() {
        if(api.pageParam.POrderID!="无"){
            this.item.POrderID=api.pageParam.POrderID
        }
        
        this.item.PlineId=api.pageParam.PlineID

        // alert(JSON.stringify(this.item))
        this.getPline()
        this.getPOrderID()
        this.getStatID()
    },
    watch: {  //实时监听搜索输入内容
    'searchKey': {
      handler(newVal) {
        let key = String(newVal);
        //alert(key);
        key = key.replace(/\s*/g, "");
        const reg = new RegExp(key, "ig");
        /* 进行筛选，将筛选后的数据放入新的数组中，‘name’键可根据需要搜索的key进行调整 */
        this.searchColumns = this.columnspline.filter(item => item.plineName.match(reg) != null);
        //alert(this.searchColumns);
      },
      deep: true,
      immediate: true,
    },

    'searchKey1': {
      handler(newVal) {
        let key = String(newVal);
        //alert(key);
        key = key.replace(/\s*/g, "");
        const reg = new RegExp(key, "ig");
        /* 进行筛选，将筛选后的数据放入新的数组中，‘name’键可根据需要搜索的key进行调整 */
        this.columnsPOrderIDND = this.columnsPOrderID.filter(item => item.POrderIDAndMaterialName.match(reg) != null);
        //alert(this.searchColumns);
      },
      deep: true,
      immediate: true,
    },

    'searchKey2': {
      handler(newVal) {
        let key = String(newVal);
        //alert(key);
        key = key.replace(/\s*/g, "");
        const reg = new RegExp(key, "ig");
        /* 进行筛选，将筛选后的数据放入新的数组中，‘name’键可根据需要搜索的key进行调整 */
        this.statColumn2 = this.statColumn.filter(item => item.POrderIDAndMaterialName.match(reg) != null);
        //alert(this.searchColumns);
      },
      deep: true,
      immediate: true,
    },
  },

    methods: {

        onConfirmpline(value, index) {

       
            this.item.PlineId = this.searchColumns[index].plineId;
            this.item.valuepline = this.searchColumns[index].plineName;
            this.showPickerpline = false;
        },
        async getPline() {

          
            if(this.item.PlineId==null||this.item.PlineId==""||this.item.PlineId==undefined){
                this.plineStatus=1
                let _this = this;
            try {
                let res = await _httpClientApisie.get(
                _httpClientApisie.getApiPrefix() +
                "/PLineEquipment/GetList?FactoryID=TC00"
                );
                if (res.HttpCode === "200") {
                //alert(JSON.stringify(res));
                let teamMap = res.Data.map((item) => ({
                    plineId: item.PLineID,
                    plineName: item.PLineName,
                }));
                _this.columnspline = teamMap;
                _this.searchColumns =teamMap;
                }
          
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
            }
           
            
        },
    
        async getPOrderID() {

            // alert(this.item.POrderID)
            if(this.item.POrderID==null||this.item.POrderID==""||this.item.POrderID==undefined){
                this.orderStatus=1;
                 let _this = this;
            try {
                let res = await _httpClientApisie.get(
                _httpClientApisie.getApiPrefix() + "/ProductionOrder/GetList"
                );
                if (res.HttpCode === "200") {
                let teamMap = res.Data.map((item) => ({
                    POrderID: item.POrderID,
                    MaterialName: item.MaterialName,
                    MaterialID: item.MaterialID,
                    POrderIDAndMaterialName: item.POrderID+" "+item.MaterialName
                }));
                _this.columnsPOrderID = teamMap;
                _this.columnsPOrderIDND = teamMap;
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }

            return
            }
         
            try {
                //alert(this.form.POrderID)

                let res = await _httpClientApisie.get(
                    _httpClientApisie.getApiPrefix() + "/ProductionOrder/GetList?POrderID="+this.item.POrderID
                );
                // alert(JSON.stringify(res))

                if (res.HttpCode === "200") {
                    this.item.MaterailName=res.Data[0].MaterialName 
                    this.item.MaterailID=res.Data[0].MaterialID
                    // this.showOrder=res.Data[0].POrderID + " " + res.Data[0].MaterialName
                }
        
            } catch (e) {
                alert(JSON.stringify(e));
            }
        },
        showPickerPline(){
      
            if(this.plineStatus==1){
            this.showPickerpline=true
            }
        },

        showPickerPOrder(){

            if(this.orderStatus==1){
                 this.showPickerPOrderID = true
            }
            
        },
        onConfirmPOrderID(value, index) {
            this.item.POrderID = this.columnsPOrderIDND[index].POrderID;
            this.item.MaterailID=this.columnsPOrderIDND[index].MaterialID
            this.item.MaterailName=this.columnsPOrderIDND[index].MaterialName
            this.showPickerPOrderID = false;
        },
        onConfirmStatID(value,index){
            this.item.StatID = this.statColumn2[index].StatID;
            this.item.StatName=this.statColumn2[index].StatName
            // alert(JSON.stringify(this.item))
            this.showPickerPStatID = false;
        },

        async getStatID() {

            let _this = this;
            try {
                let res = await _httpClientApisie.get(
                _httpClientApisie.getApiPrefix() + "/QualityStatisticItem/GetList"
                );
                if (res.HttpCode === "200") {
                let teamMap = res.Data.map((item) => ({
                    StatID: item.StatID,
                    StatName: item.StatName,
                    Pshow: item.StatID+" "+item.StatName
                }));
                _this.statColumn = teamMap;
                _this.statColumn2 = teamMap;
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },

        async onSubmit(){
            //跳转页面
            let item=this.item
            api.openWin({
                name: 'qualityAssistance',
                url: './qAssistance-qualityAssistanceShow.html',
                pageParam: {
                    item: item
                }
            });

        }
        
    },
};
</script>

<style lang="scss" scoped>

</style>